<template>
  <div>
    <el-form ref="userDetail" :model="userDetail" label-width="120px">
      <el-form-item label="ID">
        <div class="detail">&nbsp;{{ userDetail.id }}</div>
      </el-form-item>
      <el-form-item label="账号">
        <div class="detail">&nbsp;{{ userDetail.loginAct }}</div>
      </el-form-item>
      <el-form-item label="密码">
        <div class="detail">&nbsp;******</div>
      </el-form-item>
      <el-form-item label="姓名">
        <div class="detail">&nbsp;{{ userDetail.name }}</div>
      </el-form-item>
      <el-form-item label="手机">
        <div class="detail">&nbsp;{{ userDetail.phone }}</div>
      </el-form-item>
      <el-form-item label="邮箱">
        <div class="detail">&nbsp;{{ userDetail.email }}</div>
      </el-form-item>
      <el-form-item label="账号未过期">
        <div class="detail">&nbsp;{{ userDetail.accountNoExpired === 1 ? '是' : '否' }}</div>
      </el-form-item>
      <el-form-item label="密码未过期">
        <div class="detail">&nbsp;{{ userDetail.credentialsNoExpired === 1 ? '是' : '否' }}</div>
      </el-form-item>
      <el-form-item label="账号未锁定">
        <div class="detail">&nbsp;{{ userDetail.accountNoLocked === 1 ? '是' : '否' }}</div>
      </el-form-item>
      <el-form-item label="账号是否启用">
        <div class="detail">&nbsp;{{ userDetail.accountEnabled === 1 ? '是' : '否' }}</div>
      </el-form-item>
      <el-form-item label="创建时间">
        <div class="detail">&nbsp;{{ userDetail.createTime }}</div>
      </el-form-item>
      <el-form-item label="创建人">
        <div class="detail">&nbsp;{{ userDetail.createByDo.name }}</div>
      </el-form-item>
      <el-form-item label="编辑时间">
        <div class="detail">&nbsp;{{ userDetail.editTime }}</div>
      </el-form-item>
      <el-form-item label="编辑人">
        <div class="detail">&nbsp;{{ userDetail.editByDo.name }}</div>
      </el-form-item>
      <el-form-item label="最近登录时间">
        <div class="detail">&nbsp;{{ userDetail.lastLoginTime }}</div>
      </el-form-item>
      <el-form-item>
        <el-button type="success" @click="goBack">返回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { doGet } from '../http/httpRequest'

export default {
  name: 'UserDetailView',
  data() {
    return {
      // 用户详情对象
      userDetail: {
        createByDo: {},
        editByDo: {}
      }
    }
  },
  mounted() {
    this.loadUserDetail()
  },
  methods: {
    // 加载用户详情
    loadUserDetail() {
      // id名字要和动态路由中配置的path: 'user/:id' 中的id名字相同
      let id = this.$route.params.id
      doGet('/api/user/' + id, {}).then(resp => {
        console.log(resp);
        if (resp.data.code === 200) {
          this.userDetail = resp.data.data
          if (!this.userDetail.createByDo) {
            this.userDetail.createByDo = {}
          }
          if (!this.userDetail.editByDo) {
            this.userDetail.editByDo = {}
          }
        }
      })
    },
    // 返回上一级
    goBack() {
      this.$router.go(-1)
    }
  }
}
</script>

<style scoped>
  .detail {
    background-color: #f0ffff;
    width: 100%;
    padding-left: 15px;
  }
</style>